<template>
	<div class="cesium-container" ref="cesiumContainer"></div>
</template>
<script lang="ts" setup>
import {reactive,toRefs,defineComponent, ref, onMounted, onBeforeUnmount} from "vue"
// import { Jesium } from "../modules/jesium"
import { Jesium } from "@even_jie/jesium"
import { GUIBusinessCode } from "./gui"
import * as Cesium from "cesium"

const cesiumContainer = ref();
let jesium: Jesium | null = null;
onMounted(() => {
	window.Cesium = Cesium;
	jesium = new Jesium(cesiumContainer.value);
	jesium.enableDepthTestAgainstTerrain(true);
	const gui = new GUIBusinessCode(jesium);
	console.log()
})
onBeforeUnmount(() => {
	if(jesium) {
		jesium.destory();
	}
})
</script>

<style lang="scss" scoped>
.cesium-container {
	width: 100%;
	height: 100%;
}
</style>
